<template>
  <div id="app" ref="appRef">
    <fc-designer ref="designer" height="100vh" :config="designerConfig">
      <template slot="handle">
        <el-button @click="GetFormJson" round type="primary">提交</el-button>
      </template>
    </fc-designer>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="860px">
      <FormDiy :FcDesignerRule="fcDesignerRule" :FcDesignerOptions="fcDesignerOptions"></FormDiy>
    </el-dialog>
  </div>
</template>

<script>
import FormDiy from '@/components/FormDiy.vue'
export default {
  components: {
    FormDiy,
  },
  name: 'echart-map',
  data() {
    return {
      dialogVisible: false,
      fcDesignerRule: '',
      fcDesignerOptions: '',
      designerConfig: {},
    }
  },
  mounted() {},
  methods: {
    GetFormJson() {
      // 获取json
      this.fcDesignerRule = JSON.stringify(this.$refs.designer.getRule())
      this.fcDesignerOptions = JSON.stringify(this.$refs.designer.getOption())
      this.dialogVisible = true
      // console.log(json, option) // 通过获取到的json, option可以从现表单
    },
  },
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f2fcff;
  width: 100%;
  height: 100%;
}
body {
  margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>
